<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:h="http://java.sun.com/jsf/html"
	template="/WEB-INF/templates/default.xhtml">


	<ui:define name="content">
		<h1>#{IdentityModelBean.header}</h1>

		<p:tabView>
			<p:tab title="Personal">
				<h:form id="personalForm">
					<h2>Personal details</h2>

					<table>
						<tr>
							<th style="text-align: right;">
								<h:outputText value="Create a new identity" /></th>
							<td></td>
						</tr>
						<tr>
							<th style="text-align: right;"><h:outputLabel
									for="firstName" value="firstname" /></th>
							<td><h:inputText id="firstName"
									value="#{identityManager.identity.firstName}" /> 
								<h:message for="firstName" errorClass="invalid" /></td>
						</tr>
						<tr>
							<th style="text-align: right;"><h:outputLabel for="lastName"
									value="lastname" /></th>
							<td><h:inputText id="lastName"
									value="#{identityManager.identity.lastName}" /> 
								<h:message
									for="lastName" errorClass="invalid" /></td>
						</tr>
						<tr>
							<th style="text-align: right;"><h:outputLabel
									for="employeeId" value="employee id" /></th>
							<td><h:inputText id="employeeId"
									value="#{identityManager.identity.employeeId}" /> <h:message
									for="employeeId" errorClass="invalid" /></td>
						</tr>
						<tr>
							<th><hr/></th>
							<td></td>
						</tr>	
						<tr>
							<th style="text-align: right;">
							<h:outputLabel
									for="emailAdd" value="Add Email" /></th>
							<td>
							<h:inputText id="emailAdd" value="#{identityManager.emailAdd}"/>
							<h:message
									for="emailAdd" errorClass="invalid" />
							<p:commandButton id="addEmailButton" action="addEmail" value="add email"
							                 update="emailsTable"
								             actionListener="#{identityManager.addEmail}" />
									
							</td>
						</tr>	
						<tr>
							<th style="text-align: right;">
								<h:outputText value="list of emails" /></th>
							<td>
								<p:dataTable id="emailsTable" var="email" value="#{identityManager.identity.emails}">
									<p:column>
										<f:facet name="header">
												<h:outputText value="emailaddr" />
										</f:facet>	
										<h:outputText value="#{email.email} + d" />
									</p:column>					
								</p:dataTable> 
							</td>
						</tr>
						
						
						
					</table>
					<p>
						<p:commandButton id="save" action="save" value="Save"
							    immediate="true" 
								actionListener="#{identityManager.save}" />
						
						<h:outputText value=" All clear!"
							rendered="#{facesContext.postback and empty facesContext.messageList}"
							style="color: green;" />
					</p>
				</h:form>
			</p:tab>
			<p:tab title="Roles">
				<h:form id="roleSelectionForm">
					<h:panelGrid id="roleSelectionGrid" columns="3">
						<f:facet name="selector"></f:facet>
						<p:tree id="roleTree" value="#{roleManager.root}"
							selectionMode="single" var="document" dynamic="false"
							nodeSelectListener="#{identityManager.onNodeSelect}">
							<p:treeNode>
								<h:outputText value="#{document}" />
							</p:treeNode>
						</p:tree>
						<f:facet name="selector"></f:facet>
					
						<p:commandButton actionListener="#{identityManager.addRole}" 
						                 value="add" ajax="true"
										 update="attributedRolesTable"/>
					
						<f:facet name="list"></f:facet>
						<p:dataTable id="attributedRolesTable" var="attributedRoles" value="#{identityManager.attributedRoles}">
							<p:column> 
								<h:outputText value="#{attributedRoles.name}" />
							</p:column>	
						</p:dataTable>
					</h:panelGrid>
				</h:form>
			</p:tab>
			<p:tab title="Accounts">
				<h:outputText value="Dolor" />
			</p:tab>
		</p:tabView>


	</ui:define>
</ui:composition>
